<template>
  <div class="department-user-panel" v-loading="loading">
    <!-- start 部门 -->
    <div class="department" v-if="!isSearch">
      <el-tree
        v-if="depts.length"
        :props="{ label: 'tagName' }"
        :data="depts"
        node-key="ObjectId"
        check-strictly
        highlight-current
        default-expand-all
        check-on-click-node
        :expand-on-click-node="false"
        @node-click="chooseDept"
      >
      </el-tree>
    </div>
    <!-- end 部门 -->

    <!-- start 成员 -->
    <div
      :class="['user', { 'search-container': isSearch }]"
      v-loadmore="loadmoreOptions"
    >
      <el-tree
        v-if="userPage.list.length"
        ref="contactTree"
        :props="{ label: 'displayName' }"
        :data="userPage.list"
        node-key="id"
        show-checkbox
        check-on-click-node
        :default-checked-keys="shareData.value"
        @check-change="chooseUser"
      >
      <span slot-scope="{ node, data }">

        <template v-if="isOpenData && data.staffId">
          <!-- // TODO: 微信人员open-data -->
          <open-data type="userName" :openid="data.staffId"></open-data>
        </template>
        <template v-else>
          {{ node.label }}
        </template>
      </span>
      </el-tree>
    </div>
    <!-- end 成员 -->
  </div>
</template>

<script>
/* api */
import * as FlowApi from '@src/api/FlowApi.ts';
/** utils */
import Page from '@model/Page';
import { isOpenData } from '@src/util/platform';

export default {
  name: 'config-contact-dept-user',
  props: {
    shareData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      depts: [], // 部门列表
      userPage: new Page(),
      params: {
        keyword: '',
        tagId: '',
        pageNum: 1,
        pageSize: 20
      },
      loadmoreOptions: {
        disabled: false,
        callback: this.loadmore
      },
      isOpenData
    };
  },
  computed: {
    isSearch() {
      return this.shareData.keyword;
    }
  },
  mounted() {
    this.fetchDept();
  },
  methods: {
    /** 抓取部门数据 */
    fetchDept() {
      return FlowApi.tagV2List({ seeAllOrg: false })
        .then(result => {
          this.depts = (result && result.list) || [];
        })
        .catch(err => console.error('err', err));
    },
    /** 搜索 */
    search() {
      this.chooseDept();
    },
    /** 选择一个部门 */
    chooseDept(dept = {}) {
      this.selectedDept = dept;
      this.userPage.list = [];

      // 查询用户
      this.params.pageNum = 1;
      this.params.keyword = this.shareData.keyword;
      this.params.tagId = dept.parentId ? dept.id : '';
      this.userPage.list = [];

      this.fetchUser(this.params);
    },
    /** 抓取用户数据 */
    fetchUser(params = {}) {
      this.loading = true;
      this.loadmoreOptions.disabled = true;

      FlowApi.userList(params)
        .then(res => {
          (res.list || []).forEach(item => {
            item.label = item.displayName;
            item.id = item.userId;
          });

          this.userPage.merge(Page.as(res));
        })
        .finally(() => {
          this.loadmoreOptions.disabled = !this.userPage.hasNextPage;
          this.loading = false;
        })
        .catch(err => console.log(err));
    },
    /** 加载更多 */
    loadmore() {
      this.params.pageNum += 1;
      this.fetchUser(this.params);
    },
    /** 选择成员 */
    chooseUser(user, checked) {
      let data = { ...user, id: user.userId, name: user.displayName };
      this.$emit('update', { data, checked, type: this.shareData.type });
    }
  }
};
</script>

<style lang="scss" scoped>
.department-user-panel {
  height: 100%;
  display: flex;

  .department,
  .user {
    flex: 1;
    max-width: 50%;
    padding: 8px 0;
    overflow-y: auto;
  }

  .department {
    border-right: 1px solid $color-border-l2;
  }

  .search-container {
    max-width: 100%;
  }
}
</style>
